import { ref } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
// 封装数据懒加载的通用逻辑代码
const useLazyData = fn => {
  // 监听的dom元素
  const target = ref(null)
  // 使用数据懒加载，当滚动到具体dom可视区域时在发请求拿数据
  // useIntersectionObserver 该方法有三个参数
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      // 在这里进行判断是否到达了可视区域
      // isIntersecting  到达为true,反之false
      if (isIntersecting) {
        // 停止可视区域监听
        stop()
        // 目标dom元素可见状态下执行的逻辑代码
        fn()
      }
    },
    { threshold: 0 }
  )
  return target
}
// 封装时间倒计时函数
// 封装一个通用的倒计时的函数 useCountDown
// 用法： const { time, start, stop } = useCountDown()
//   time : 是一个响应式数据。每隔1秒，值减一(5->4->3...)。如果在视图上使它，视图会自动更新。
//   start: 用来启动倒计时,传入初始值。如：start(20)， time的值从20 -> 19 -> 18 ....
//   stop: 停止倒计时
const useCountDown = () => {
  const time = ref(0)
  // pause: 停止
  // resume: 开始,必须调用才可以执行
  // useIntervalFn倒计时函数
  const { pause, resume } = useIntervalFn(
    () => {
      time.value--
      if (time.value <= 0) {
        pause()
      }
    },
    1000,
    { immediate: false }
  )

  const start = num => {
    // 赋初值
    time.value = num
    // 开始倒计时
    resume()
  }

  const stop = () => {
    pause()
  }
  return { time, start, stop }
}

export { useLazyData, useCountDown }
